<template>
  <div ref="echart" style="height: 100%; width: 100%"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  //子组件中接受父组件传过来的charData,在watch中进行监听，
  //如果charData数据发生变化，则进行echart的初始化，并进行绘制
  props: {
    charData: {
      type: Object,
      default() {
        return {
          xData: [],
          series: [],
        };
      },
    },
    //判断是否为基于x轴的图形
    isAxisChart: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    //在计算属性中 判断是否为绘制基于x轴的图形,返回相应的option
    //因为option是根据isAxisChart进行判断，所以要放在计算属性里
    options() {
      return this.isAxisChart ? this.axisOption : this.normalOption;
    },

    iscollase() {
     return this.$store.state.tab.collaMenu;
    },
  },
  //对父组件传过来的charData进行监听，发生变化就重新判断并绘制
  watch: {
    charData: {
      handler: function () {
        this.initChart();
      },
      //开启深度监听，这样复杂的数据类型也生效，要不然只能监听基本类型
      deep: true,
    },
    iscollase(){ 
      setTimeout(() => {
        this.resizeEchart();
      }, 300);
    },
  },
  data() {
    return {
      //基于坐标轴的Option,父组件传过来的数据,要填充到xAxis和yAxis，series中
      //放到echarts.setOption里面就可以进行图形绘制了
      echart: null,
      axisOption: {
        legend: {
          textStyle: {
            color: "#333",
          },
        },
        grid: {
          left: "20%",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: [
          {
          
            type:"value",
            axisLine: {
              lineStyle: {
                color: "#17b3a3",
              },
            },
          },
        ],
        series: [],
      },

      //不是基于坐标轴情况的option，比如饼状图的绘制
      normalOption: {
        tooltip: {
          trigger: "item",
        },
        series: [],
      },
    };
  },

  methods: {
    initChart() {
      this.initCharData();
      //如果已经创建好了echarts，则直接绘制。
      if (this.echart) {
        this.echart.setOption(this.options);
      } else {
        //否则，初始化一个，并进行绘制。
        this.echart = echarts.init(this.$refs.echart);
        this.echart.setOption(this.options);
      }
    },
    //初始化，对isAxisChart进行判断，如果是true，则是基于坐标轴的绘制
    //把数据放到相对应的定义好的Option里
    initCharData() {
      if (this.isAxisChart) {
        this.axisOption.xAxis.data = this.charData.xData;
        this.axisOption.series = this.charData.series;
      } else {
        this.normalOption.series = this.charData.series;
        console.log("this.normalOption.series", this.normalOption.series);
      }
    },
    resizeEchart() {
      this.echart ? this.echart.resize() : ""
    },
  },
  mounted() {
    //创建对resize的监听可以做到自适应
    window.addEventListener("resize", this.resizeEchart);
  },
  destroyed() {
    window.removeEventListener("resize", this.resizeEchart);
  },
};
</script>

<style>
</style>